<template>
    <div>
        <!-- <h1>我是测试组件的组件</h1>
        <XtxSkeleton></XtxSkeleton>
        <XtxSkeleton width="100px" height="100px"></XtxSkeleton>
        <XtxSkeleton width="180px" height="200px" bg="pink"></XtxSkeleton>

        <XtxSlider :sliders="sliders"></XtxSlider>

        <div v-for="item in 10" :key="item" :ref="setItemRef">123</div>

        <XtxBread>
          <XtxBreadItem to="/">首页</XtxBreadItem>
          <XtxBreadItem to="/login">登录</XtxBreadItem>
        </XtxBread>

        <XtxCheckbox >JI</XtxCheckbox>
        <XtxMessage text="手机号或密码错误" type="error" /> -->
        <!-- <button @click="pause">{{countTime}}</button> -->
        <button @click="btn">{{countTime}}</button>
    </div>
</template>

<script>
// import { onBeforeUpdate, onMounted, onUpdated } from 'vue'
// import Message from '@/components/Message'
// import { MyCountDown } from '@/compositions'
import { useCountDown } from '@/compositions'
export default {
  data () {
    return {
      sliders: [
        {
          hrefUrl: '/#/',
          id: '630000201807155635',
          imgUrl: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/images/b1.jpg'
        },
        {
          hrefUrl: '/#/',
          id: '650000201207058528',
          imgUrl: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/images/b2.jpg'
        }
      ]
      // itemRefs: []
    }
  },
  setup () {
    // const itemRefs = []
    // const setItemRef = el => {
    //   console.log(el)
    //   if (el) {
    //     itemRefs.push(el)
    //   }
    // }
    // onBeforeUpdate(() => {
    //   itemRefs = []
    // })
    // onUpdated(() => {
    //   console.log(itemRefs)
    // })
    // onMounted(() => {
    //   Message({ type: 'error', text: '登录失败' })
    // })
    // const { countTime, start, pause } = MyCountDown(3)
    // start()
    const { countTime, start, pause } = useCountDown(10)
    start()
    function btn () {
      pause()
    }
    return {
      // setItemRef,
      countTime,
      btn
      // countDown
    }
  }
}
</script>

<style>

</style>
